<template>
  <!-- 详情页面 -->
  <el-dialog title="工单任务详情" v-if="infoOpen" :visible.sync="infoOpen" :modal="false" width="1200px">
    <el-row class="task-content">
      <el-col :span="4" class="row-name">{{ taskInfo.taskName }}</el-col>
      <el-col :span="12" style="margin-left: 10px;"> {{ taskInfo.taskCode }}</el-col>
    </el-row>

    <el-descriptions :column="2" class="is-bordered" style="margin-bottom: 10px;margin-top: 20px;" border>
      <el-descriptions-item
        label="创建人："
        label-style="margin-bottom: 20px; margin-top: 20px;"
        content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.createBy }}
      </el-descriptions-item>
      <el-descriptions-item
        label="创建时间："
        label-style="margin-bottom: 20px; margin-top: 20px;"
        content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.createTime }}
      </el-descriptions-item>
      <el-descriptions-item
        label="任务进度："
        label-style="margin-bottom: 20px; margin-top: 20px;"
        content-style="margin-bottom: 20px; margin-top: 20px;">
        <template>
          <el-progress :text-inside="true" :stroke-width="26" :percentage="taskInfo.progress"
                       status="success"></el-progress>
        </template>
      </el-descriptions-item>
      <el-descriptions-item
        label="合格/计划："
        label-style="margin-bottom: 20px; margin-top: 20px;"
        content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.quantityQuanlify }}/{{ taskInfo.quantity }}
      </el-descriptions-item>
    </el-descriptions>

    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <!--        工单信息-->
          <div class="work-info">
            <div class="divider">
              <span class="label">工单信息</span>
            </div>

            <el-descriptions :column="2" style="margin-top: 40px;" border>
              <el-descriptions-item
                label="工单编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.workorderCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工单名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.workorderName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="产品名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.productName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="产品编码"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.productCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="规格型号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.productSpc }}
              </el-descriptions-item>
              <el-descriptions-item
                label="单位"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.unitOfMeasure }}
              </el-descriptions-item>
              <el-descriptions-item
                label="BOM编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.bomCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="BOM版本号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.bomName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="客户名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ workorderInfo.clientName }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!--        任务信息-->
          <div class="work-info">
            <div class="divider">
              <span class="label">任务信息</span>
            </div>
            <el-descriptions :column="2" style="margin-top: 40px;" border>
              <el-descriptions-item
                label="任务编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.taskCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="任务名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.taskName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工作站名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.workstationName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="车间名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.workshopName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工艺编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.routeCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工艺名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.routeName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工序编号"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.processCode }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工序名称"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.processName }}
              </el-descriptions-item>
              <el-descriptions-item
                label="操作人"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.attr1 }}
              </el-descriptions-item>
              <el-descriptions-item
                label="计价方式"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
                <dict-tag :options="dict.type.pro_pricing_method" :value="taskInfo.pricingMethod"/>
              </el-descriptions-item>
              <el-descriptions-item
                label="计划数量"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
                <el-tag type="danger" v-if="taskInfo.quantity !== taskInfo.quantityQuanlify">{{ taskInfo.quantity }}</el-tag>
                <el-tag type="success" v-else>{{ taskInfo.quantity }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item
                label="合格品数量"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
                <el-tag type="success">{{ taskInfo.quantityQuanlify ? taskInfo.quantityQuanlify : 0 }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item
                label="不良品数量"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">
                <el-tag type="danger">{{ taskInfo.quantityUnquanlify ? taskInfo.quantityUnquanlify : 0 }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item
                label="计划开工时间"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.startTime }}
              </el-descriptions-item>
              <el-descriptions-item
                label="计划完工时间"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.endTime }}
              </el-descriptions-item>
              <el-descriptions-item
                label="工序说明"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.attention }}
              </el-descriptions-item>
              <!--              <el-descriptions-item
                              label="设备编码"
                              label-style="margin-bottom: 20px; margin-top: 20px;"
                              content-style="margin-bottom: 20px; margin-top: 20px;">{{ xsSalesOrder.deviceCode }}
                            </el-descriptions-item>-->
              <el-descriptions-item
                label="喷漆要求"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ xsSalesOrder.paintingRequirements }}
              </el-descriptions-item>
              <el-descriptions-item
                label="设备方向"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ xsSalesOrder.deviceOrientation }}
              </el-descriptions-item>
              <el-descriptions-item
                label="说明备注"
                label-style="margin-bottom: 20px; margin-top: 20px;"
                content-style="margin-bottom: 20px; margin-top: 20px;">{{ xsSalesOrder.shuoming }}
              </el-descriptions-item>
              <!--              <el-descriptions-item
                              label="实际开工时间"
                              label-style="margin-bottom: 20px; margin-top: 20px;"
                              content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.actualStartTime }}
                            </el-descriptions-item>
                            <el-descriptions-item
                              label="实际完工时间"
                              label-style="margin-bottom: 20px; margin-top: 20px;"
                              content-style="margin-bottom: 20px; margin-top: 20px;">{{ taskInfo.actualEndTime }}
                            </el-descriptions-item>-->
              <!--              <el-descriptions-item
                              label="班组"
                              label-style="margin-bottom: 20px; margin-top: 20px;"
                              content-style="margin-bottom: 20px; margin-top: 20px;">{{ proTask.unit }}
                            </el-descriptions-item>
                            <el-descriptions-item
                              label="任务负责人"
                              label-style="margin-bottom: 20px; margin-top: 20px;"
                              content-style="margin-bottom: 20px; margin-top: 20px;">{{ proTask.code }}
                            </el-descriptions-item>-->
            </el-descriptions>
          </div>
        </el-tab-pane>
        <el-tab-pane label="物料清单" name="second">
          <el-table
            border
            v-loading="false"
            :data="workorderItemList"
            @selection-change="handleItemSelectionChange"
          >
            <el-table-column type="index" label="序号" width="55" align="center"/>
            <el-table-column label="物料编码" width="150px" align="center" prop="itemCode" :show-overflow-tooltip="true"/>
            <el-table-column label="物料名称" width="150px" align="center" prop="itemName" :show-overflow-tooltip="true"/>
            <el-table-column label="规格型号" align="center" prop="specification" :show-overflow-tooltip="true"/>
            <el-table-column label="单位" align="center" prop="unitOfMeasure" :show-overflow-tooltip="true"/>
            <el-table-column label="需求数量" width="120px" align="center" prop="used" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag type="primary">{{ scope.row.used * taskInfo.quantity }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="领料数量" align="center" prop="llNum">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.llNum }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="退料数量" align="center" prop="tlNum">
              <template slot-scope="scope">
                <el-tag type="danger">{{ scope.row.tlNum }}</el-tag>
              </template>
            </el-table-column>
            <!--            <el-table-column label="用料比例" width="150px" align="center" prop="quantity"/>-->
            <el-table-column label="规格" align="center" prop="model" :show-overflow-tooltip="true"/>
            <el-table-column label="规格单位" align="center" width="80" prop="specificationUnit"/>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getItemList"
          />
          <!-- 添加生产领料对话框 -->
          <el-dialog title="领料出库" :visible.sync="openItemDialog" width="960px" append-to-body>
            <el-form ref="issueForm" :model="issueForm" :rules="issueFormRules" label-width="100px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="领料单编号" prop="issueCode">
                    <el-input v-model="issueForm.issueCode" placeholder="请输入领料单编号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label-width="80">
                    <el-switch v-model="issueAutoGenFlag"
                               active-color="#13ce66"
                               active-text="自动生成"
                               @change="handleAutoGenChangeIssue(issueAutoGenFlag)">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="领料单名称" prop="issueName">
                    <el-input v-model="issueForm.issueName" placeholder="请输入领料单名称"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="领料任务" prop="taskCode">
                    <el-input v-model="issueForm.taskCode" placeholder="生产任务"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="领料日期" prop="issueDate">
                    <el-date-picker clearable
                                    v-model="issueForm.issueDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择领料日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="单据状态" prop="status">
                    <el-select v-model="issueForm.status" disabled>
                      <el-option
                        v-for="dict in dict.type.mes_order_status"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="生产工单" prop="workorderCode">
                    <el-input v-model="issueForm.workorderCode" placeholder="生产工单"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户编号">
                    <el-input v-model="issueForm.clientCode" placeholder="请选择生产工单">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input v-model="issueForm.clientName" placeholder="请选择生产工单">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="issueForm.remark" type="textarea" placeholder="请输入内容"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-divider content-position="center">物料信息</el-divider>
            <el-card shadow="always" class="box-card">
              <ItemSelectLine ref="line" :issuelineList="this.issuelineList"></ItemSelectLine>
            </el-card>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitIssueForm">确 定</el-button>
              <el-button @click="cancelIssue">取 消</el-button>
            </div>
          </el-dialog>
          <el-dialog title="退料入库" :visible.sync="openRtIssueDialog" width="960px" append-to-body>
            <el-form ref="rtIssueForm" :model="rtIssueForm" :rules="rtIssueFormRules" label-width="100px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="退料单编号" prop="rtCode">
                    <el-input v-model="rtIssueForm.rtCode" placeholder="请输入退料单编号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label-width="80">
                    <el-switch v-model="rtIssueAutoGenFlag"
                               active-color="#13ce66"
                               active-text="自动生成"
                               @change="handleRtIssueAutoGenChange(rtIssueAutoGenFlag)">
                    </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="退料单名称" prop="rtName">
                    <el-input v-model="rtIssueForm.rtName" placeholder="请输入退料单名称"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="生产工单" prop="workorderCode">
                    <el-input v-model="rtIssueForm.workorderCode" placeholder="请输入生产工单">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="生产任务">
                    <el-input v-model="rtIssueForm.taskCode" placeholder="请输入生产任务">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="退料日期" prop="rtDate">
                    <el-date-picker clearable
                                    v-model="rtIssueForm.rtDate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择退料日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="rtIssueForm.remark" type="textarea" placeholder="请输入内容"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-divider content-position="center">物料信息</el-divider>
            <el-card shadow="always" class="box-card">
              <Rtissueline :rtIssueLineList="rtIssueLineList"></Rtissueline>
            </el-card>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="rtIssueSubmitForm">保 存</el-button>
              <el-button @click="rtIssueCancel">取 消</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="任务图纸" name="processPicture">
          <PdfView :taskId="taskInfo.taskId"></PdfView>
        </el-tab-pane>
        <el-tab-pane label="领料记录" name="third">
          <el-table border v-loading="false" :data="issueheaderList">
            <el-table-column label="序号" type="index" width="50" align="center"/>
            <el-table-column label="领料单编号" align="center" width="150px" prop="issueCode"/>
            <el-table-column label="物料编号" align="center" prop="itemCode" width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="物料名称" align="center" prop="itemName" width="150" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag type="primary">{{ scope.row.itemName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="specification" width="80"/>
            <el-table-column label="单位" align="center" prop="unitOfMeasure" width="50"/>
            <el-table-column label="领料数量" align="center" prop="quantityIssued" width="80">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.quantityIssued }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" prop="batchCode" width="160" :show-overflow-tooltip="true"/>
            <el-table-column label="仓库名称" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="库区名称" align="center" prop="locationName" width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="库位名称" align="center" prop="areaName" width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="领料时间" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getIssueList"
          />
        </el-tab-pane>
        <el-tab-pane label="退料记录" name="fourth">
          <el-table border v-loading="false" :data="rtIssueList">
            <el-table-column label="序号" type="index" width="50" align="center"/>
            <el-table-column label="退料单编号" align="center" width="150px" prop="rtCode"/>
            <el-table-column label="物料编号" align="center" prop="itemCode" width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="物料名称" align="center" prop="itemName" width="150" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <el-tag type="primary">{{ scope.row.itemName }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="specification" width="80"/>
            <el-table-column label="单位" align="center" prop="unitOfMeasure" width="50"/>
            <el-table-column label="退料数量" align="center" prop="quantityRt" width="80">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.quantityRt }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" prop="batchCode" width="160" :show-overflow-tooltip="true"/>
            <el-table-column label="仓库名称" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="库区名称" align="center" prop="locationName" width="120" :show-overflow-tooltip="true"/>
            <el-table-column label="库位名称" align="center" prop="areaName" width="150" :show-overflow-tooltip="true"/>
            <el-table-column label="退料时间" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getRtIssueList"
          />
        </el-tab-pane>
        <el-tab-pane label="报工记录" name="fifth">
          <el-table
            v-loading="false"
            :data="feedbackList"
          >
            <el-table-column label="报工类型" align="center" prop="feedbackType">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.mes_feedback_type"
                  :value="scope.row.feedbackType"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="工作站"
              width="150px"
              align="center"
              prop="workstationName"
            />
            <el-table-column
              label="生产工单编号"
              width="150px"
              align="center"
              prop="workorderCode"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="产品物料编码"
              width="120px"
              align="center"
              prop="itemCode"
            />
            <el-table-column
              label="产品物料名称"
              width="150px"
              align="center"
              prop="itemName"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="规格型号" align="center" prop="specification"/>
            <el-table-column label="报工数量" align="center" prop="quantityFeedback">
              <template slot-scope="scope">
                <el-tag>{{ scope.row.quantityFeedback }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="合格数量" align="center" prop="quantityQualified">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.quantityQualified }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="不良数量" align="center" prop="quantityUnquanlified">
              <template slot-scope="scope">
                <el-tag type="danger">{{ scope.row.quantityUnquanlified }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="报工人" align="center" prop="nickName"/>
            <el-table-column
              label="报工时间"
              align="center"
              prop="feedbackTime"
              width="100"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.feedbackTime, "{y}-{m}-{d}") }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核人" align="center" prop="recordNick"/>
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.mes_order_status"
                  :value="scope.row.status"
                />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getProFeedbackList"
          />
        </el-tab-pane>
        <el-tab-pane label="辅料领料记录" name="six">
          <el-table border v-loading="false" :data="accessorylineList">
            <el-table-column label="序号" type="index" width="50" align="center"/>
            <el-table-column label="辅料单编号" width="150px" align="center" prop="itemCode" :show-overflow-tooltip="true"/>
            <el-table-column label="物料编号" width="120px" align="center" prop="itemCode" :show-overflow-tooltip="true"/>
            <el-table-column label="物料名称" width="150px" align="center" prop="itemName" :show-overflow-tooltip="true"/>
            <el-table-column label="规格型号" width="80px" align="center" prop="specification" :show-overflow-tooltip="true"/>
            <el-table-column label="单位" width="50px" align="center" prop="unitOfMeasure" :show-overflow-tooltip="true"/>
            <el-table-column label="领料数量" width="80px" align="center" prop="quantityIssued">
              <template slot-scope="scope">
                <el-tag type="success">{{ scope.row.quantityIssued }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="批次号" width="160" align="center" prop="batchCode" :show-overflow-tooltip="true"/>
            <el-table-column label="仓库名称" width="120" align="center" prop="warehouseName" :show-overflow-tooltip="true"/>
            <el-table-column label="库区名称" width="120" align="center" prop="locationName" :show-overflow-tooltip="true"/>
            <el-table-column label="库位名称" width="150" align="center" prop="areaName" :show-overflow-tooltip="true"/>
            <el-table-column label="领料时间" align="center" prop="createTime" width="100">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="handleEnd" v-if="optType == 'save'">确认完工</el-button>
        <el-button type="primary" @click="infoOpen=false">返 回</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { finish, getTaskInfo } from "@/api/mes/pro/protask";
import { listFeedback } from '@/api/mes/pro/feedback';
import { genCode } from "@/api/system/autocode/rule"
import { addIssue, getIssueheader } from "@/api/mes/wm/issueheader.js"
import { getlistIssueline } from "@/api/mes/wm/issueline";
import { addRtissueHeader, getRtissue } from "@/api/mes/wm/rtissue"
import ItemSelectLine from "@/views/mes/pro/task/itemSelectLine.vue";
import Rtissueline from "@/views/mes/pro/task/rtIssueLine.vue";
import { getRtListIssueline } from "@/api/mes/wm/rtissueline";
import { listTaskBom } from '@/api/mes/pro/proTaskBom';
import PdfView from "@/components/pdfView/index.vue";
import ProcessPicture from "@/views/mes/md/bomgl/processPicture.vue";
import { listAccessory } from "@/api/mes/wm/accessoryline";


export default {
  name: 'taskInfo',
  components: {ProcessPicture, PdfView, Rtissueline, ItemSelectLine},
  dicts: ["mes_order_status", "mes_feedback_type", "pro_pricing_method"],
  data() {
    return {
      infoOpen: false,
      issueAutoGenFlag: false,
      rtIssueAutoGenFlag: false,
      openItemDialog: false,
      openIssueInfoDialog: false,
      openRtIssueDialog: false,
      openRtIssueInfoDialog: false,
      activeName: 'first',
      tabIndex: 0,
      taskInfo: {},
      workorderInfo: {},
      xsSalesOrder: {},
      feedbackList: [],
      workorderItemList: [],
      issuelineList: [],
      issueheaderList: [],
      rtIssueList: [],
      rtIssueLineList: [],
      accessorylineList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskId: null,
        workorderId: null,
        status: 'FINISHED'
      },
      issueForm: {},
      issueInfoForm: {},
      rtIssueInfoForm: {},
      // 表单校验
      issueFormRules: {
        issueCode: [
          {required: true, message: "领料单编号不能为空", trigger: "blur"}
        ],
        issueName: [
          {required: true, message: "领料单名称不能为空", trigger: "blur"}
        ],
        issueDate: [
          {required: true, message: "请指定领出日期", trigger: "blur"}
        ],
        workorderCode: [
          {required: true, message: "请指定生产工单", trigger: "blur"}
        ]
      },
      rtIssueForm: {},
      rtIssueFormRules: {
        rtCode: [
          {required: true, message: "退料单编号不能为空", trigger: "blur"}
        ],
        workorderCode: [
          {required: true, message: "请选择要退料的生产工单", trigger: "blur"}
        ]
      }
    }
  },
  props: {
    optType: undefined
  },
  activated() {
    this.init(this.$route.query.taskId);
    this.queryParams.taskId = this.$route.query.taskId;
    this.activeName = 'first';
    this.tabIndex = 0;
  },
  methods: {
    init(taskId) {
      getTaskInfo(taskId).then(response => {
        if (response.code == 200 && response.data) {
          this.taskInfo = response.data.taskInfo;
          this.title = this.taskInfo.taskName + '&emsp;&emsp;&emsp;' + this.taskInfo.taskCode;
          this.workorderInfo = response.data.workorderInfo;
          this.xsSalesOrder = response.data.xsSalesOrder;
          this.infoOpen = true;
          this.activeName = 'first';
          this.tabIndex = 0;
        }
      })
    },
    handleClick(tab, event) {
      this.tabIndex = tab.index;
      if (tab.index == 1) {
        //获取物料清单
        this.queryParams.taskId = this.taskInfo.taskId;
        this.queryParams.workorderId = this.workorderInfo.workorderId;
        this.queryParams.pageNum = 1;
        this.getItemList();
      } else if (tab.index == 2) {

      } else if (tab.index == 3) {
        this.queryParams.taskId = this.taskInfo.taskId;
        this.queryParams.pageNum = 1;
        this.getIssueList();
      } else if (tab.index == 4) {
        this.queryParams.taskId = this.taskInfo.taskId;
        this.queryParams.pageNum = 1;
        this.getRtIssueList();
      } else if (tab.index == 5) {
        this.getProFeedbackList();
      } else if (tab.index == 6) {
        this.queryParams.taskId = this.taskInfo.taskId;
        this.queryParams.pageNum = 1;
        this.getAccessoryList();
      }
    },
    getAccessoryList() {
      listAccessory(this.queryParams).then(response => {
        this.accessorylineList = response.rows;
        this.total = response.total;
      });
    },
    getProFeedbackList() {
      this.queryParams.status = 'FINISHED';
      this.queryParams.taskId = this.taskInfo.taskId;
      listFeedback(this.queryParams).then(response => {
        if (response.code == 200 && response.rows) {
          this.feedbackList = [];
          this.feedbackList = response.rows;
          this.total = response.total;
        }
      })
    },
    getItemList() {
      this.workorderItemList = [];
      this.queryParams.taskId = this.taskInfo.taskId;
      this.queryParams.workorderId = null;
      this.queryParams.status = null;
      listTaskBom(this.queryParams).then(response => {
        if (response.code == 200 && response.rows) {
          this.workorderItemList = response.rows;
          this.total = response.total;
        }
      })
    },
    // 多选框选中数据
    handleItemSelectionChange(selection) {
      this.issuelineList = [];
      this.rtIssueLineList = [];
      if (selection.length > 0) {
        selection.forEach(item => {
          const issueLine = {
            lineId: null,
            issueId: null,
            materialStockId: null,
            itemId: item.itemId,
            itemCode: item.itemCode,
            itemName: item.itemName,
            specification: item.itemSpc,
            unitOfMeasure: item.unitOfMeasure,
            quantityIssued: 0,
            batchCode: null,
            warehouseId: null,
            warehouseCode: null,
            warehouseName: null,
            locationId: null,
            locationCode: null,
            locationName: null,
            areaId: null,
            areaCode: null,
            areaName: null
          }
          this.issuelineList.push(issueLine);
          const rtIssueLine = {
            lineId: null,
            rtId: null,
            materialStockId: null,
            itemId: item.itemId,
            itemCode: item.itemCode,
            itemName: item.itemName,
            specification: item.itemSpc,
            unitOfMeasure: item.unitOfMeasure,
            quantityRt: item.llNum,
            batchCode: null,
            warehouseId: null,
            warehouseCode: null,
            warehouseName: null,
            locationId: null,
            locationCode: null,
            locationName: null,
            areaId: null,
            areaCode: null,
            areaName: null
          }
          this.rtIssueLineList.push(rtIssueLine);
        })
      }
    },
    //领料出库方法
    handleItemIssueOut() {
      if (this.issuelineList.length <= 0) {
        this.$modal.msgError("请选择要领用的物料!")
        return;
      }
      this.openItemDialog = true;
      this.issueReset();
    },
    issueReset() {
      this.issueForm = {
        issueId: null,
        issueCode: '',
        issueName: '',
        workstationId: this.taskInfo.workstationId,
        workstationCode: this.taskInfo.workstationCode,
        workstationName: this.taskInfo.workstationName,
        workorderId: this.workorderInfo.workorderId,
        workorderCode: this.workorderInfo.workorderCode,
        taskId: this.taskInfo.taskId,
        taskCode: this.taskInfo.taskCode,
        clientId: this.workorderInfo.clientId,
        clientCode: this.workorderInfo.clientCode,
        clientName: this.workorderInfo.clientName,
        clientNick: this.workorderInfo.clientNick,
        issueDate: '',
        status: 'PREPARE',
        remark: null
      };
      this.issueAutoGenFlag = false;
      this.resetForm("issueForm");
    },
    cancelIssue() {
      this.issuelineList = [];
      this.getItemList();
      this.openItemDialog = false;
      this.issueReset();
    },
    submitIssueForm() {
      this.$refs[ "issueForm" ].validate(valid => {
        if (valid) {
          for (let i = 0; i < this.issuelineList.length; i++) {
            const item = this.issuelineList[ i ];
            if (item.quantityIssued <= 0) {
              this.$modal.msgError("物料【" + item.itemName + "】的领料数量必须大于0!");
              return;
            }
            if (!item.batchCode) {
              this.$modal.msgError("物料【" + item.itemName + "】的批次号不能为空");
              return;
            }
          }
          this.issueForm.wmIssueLineList = this.issuelineList;
          addIssue(this.issueForm).then(response => {
            if (response.code == 200) {
              this.$modal.msgSuccess("领料成功!")
              this.issuelineList = [];
              this.getItemList();
              this.issueReset();
              this.openItemDialog = false;
            }
          })
        }
      });

    },
    //自动生成编码
    handleAutoGenChangeIssue(issueAutoGenFlag) {
      if (issueAutoGenFlag) {
        genCode('ISSUE_CODE').then(response => {
          this.issueForm.issueCode = response;
        });
      } else {
        this.issueForm.issueCode = null;
      }
    },
    //领料记录
    getIssueList() {
      this.queryParams.status = 'FINISHED';
      getlistIssueline(this.queryParams).then(response => {
        if (response.code == 200) {
          this.issueheaderList = response.rows;
          this.total = response.total;
        }
      })
    },
    handleView(row) {
      this.openIssueInfoDialog = true;
      getIssueheader(row.issueId).then(response => {
        if (response.code == 200 && response.data) {
          this.issueInfoForm = response.data;
        }
      })
    },
    closeIssueInfo() {
      this.openIssueInfoDialog = false;
    },
    //退料入库方法
    handleRtIssueIn() {
      if (this.issuelineList.length <= 0) {
        this.$modal.msgError("请选择要退还的物料!")
        return;
      }
      this.openRtIssueDialog = true;
      this.rtIssueReset();
    },
    rtIssueReset() {
      this.rtIssueForm = {
        rtId: null,
        rtCode: null,
        rtName: null,
        workorderId: this.workorderInfo.workorderId,
        workorderCode: this.workorderInfo.workorderCode,
        taskId: this.taskInfo.taskId,
        taskCode: this.taskInfo.taskCode,
        warehouseId: null,
        warehouseCode: null,
        warehouseName: null,
        locationId: null,
        locationCode: null,
        locationName: null,
        areaId: null,
        areaCode: null,
        areaName: null,
        rtDate: new Date(),
        status: "PREPARE",
        remark: null,
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.rtIssueAutoGenFlag = false;
      this.resetForm("rtIssueForm");
    },
    handleRtIssueAutoGenChange(rtIssueAutoGenFlag) {
      if (rtIssueAutoGenFlag) {
        genCode('RTISSUE_CODE').then(response => {
          this.rtIssueForm.rtCode = response;
        });
      } else {
        this.rtIssueForm.rtCode = null;
      }
    },
    rtIssueCancel() {
      this.rtIssueLineList = [];
      this.getItemList();
      this.openRtIssueDialog = false;
      this.rtIssueReset();
    },
    rtIssueSubmitForm() {
      this.$refs[ "rtIssueForm" ].validate(valid => {
        if (valid) {
          for (let i; i < this.rtIssueLineList.length; i++) {
            const item = this.rtIssueLineList[ i ];
            if (!item.batchCode) {
              this.$modal.msgError("物料【" + item.itemName + "】的批次号不能为空");
              return;
            }
            if (item.quantityRt <= 0) {
              this.$modal.msgError("物料【" + item.itemName + "】的退料数量必须大于0!");
              return;
            }
            if (item.quantityRt > item.quantityMax) {
              this.$modal.msgError("物料【" + item.itemName + "】的退料数量不能大于领料数量!");
              return;
            }
          }
          this.rtIssueForm.wmRtIssueLineList = this.rtIssueLineList;
          addRtissueHeader(this.rtIssueForm).then(response => {
            if (response.code == 200) {
              this.$modal.msgSuccess("退料成功!")
              this.rtIssueLineList = [];
              this.getItemList();
              this.rtIssueReset();
              this.openRtIssueDialog = false;
            }
          })
        }
      })
    },
    getRtIssueList() {
      this.queryParams.status = 'FINISHED';
      getRtListIssueline(this.queryParams).then(response => {
        if (response.code == 200) {
          this.rtIssueList = response.rows;
          this.total = response.total;
        }
      })
    },
    handleRtIssueView(row) {
      this.openRtIssueInfoDialog = true;
      getRtissue(row.rtId).then(response => {
        if (response.code == 200 && response.data) {
          this.rtIssueInfoForm = response.data;
        }
      })
    },
    closeRtIssueInfo() {
      this.openRtIssueInfoDialog = false;
    },
    //完工
    handleEnd() {
      let msg = "任务完工后将不可报工，是否确认完工？";
      if (this.taskInfo.quantity != this.taskInfo.quantityQuanlify) {
        msg = '计划数量与实际生产数量不一致，完工后将不可报工，是否确认完工？';
      }
      this.$modal.confirm(msg).then(() => {
        return finish({ taskId: this.taskInfo.taskId });
      })
        .then(() => {
          this.infoOpen = false;
          this.$parent.getList();
          this.$modal.msgSuccess("完工成功");
        })
        .catch(() => {
        });
    },

  }
}
</script>
<style lang="scss">
.row-name {
  width: 24.666667%;
  white-space: nowrap; // 强制一行显示
  overflow: hidden; // 超出隐藏
  text-overflow: ellipsis; // 省略号
}
.work-info {
  margin: 20px;
}

.divider {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  margin: 20px 0; /* 上下外边距 */
}

.divider::before,
.divider::after {
  content: ''; /* 伪元素内容为空 */
  flex: 1; /* 伸展占据剩余空间 */
  border-top: 1px solid #d3d3d3; /* 灰色的上边线 */
}

.label {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #d3d3d3; /* 蓝色边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 白色背景 */
  color: #1b9aee; /* 蓝色字体 */
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.el-descriptions .is-bordered {
  table-layout: fixed !important;
}

.task-content {
  margin-top: -15px;
  font-family: '苹方 常规', '苹方', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #262626;
  text-align: left;
  line-height: 20px;
}
</style>
